<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection"
	content="telephone=no,email=no,date=no,address=no" />
<title>优音通信</title>
<div th:include="include :: footer"></div>
<link th:href="@{/css/comon.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/css/css.css}" rel="stylesheet" type="text/css" />
<script type="text/javascript" th:src="@{/js/vue-2.4.2.min.js}"></script>
<script th:src="@{/js/html2canvas.js}"></script>
<script th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" th:src="@{/js/share.js}"></script>
<!-- <script type="text/javascript" th:src="@{/js/FileSaver.js}"></script> -->
</head>
<body>
	<div class="c_con" id="app">
		<div v-show="currIndex != 3">
			<h2 class="topbar" style="margin-bottom: 0">
				<img th:src="@{/images/top.png}" />
			</h2>
			<div class="t_listbg">
			<div class="bt"><span v-text="getTime"></span></div>
				<div class="con">
					<h2 class="tx">
						<img v-bind:src="avatar"/>
					</h2>
					<div class="nc">
						<p class="p_text" th:text="${session.snsUserInfo?.nickname}"></p>
					</div>
				</div>
				<div class="clear"></div>
	
				<div class="w_con">
					<h2 style="margin-bottom: 3%;">
						<img th:src="@{/images/line.png}" />
					</h2>
					<ul class="text" v-text="text"></ul>
					<h2 style="margin-top: 3%;">
						<img th:src="@{/images/line.png}" />
					</h2>
				</div>
	
				<div class="w_btn" v-show="currIndex == 1">
					<a href="s_month.html"><img th:src="@{/images/btn1.png}" /></a> <a href="#"><img class="mt10"
						th:src="@{/images/btn2.png}" style="margin-left: 3%" v-on:click="changeCurrIndex(2)"/></a>
				</div>
	
				<div class="w_code" style="display: none;" v-show="currIndex == 2">
					<h2 class="w_code_left">
						<img th:src="@{/images/game.png}" />
					</h2>
					<h2 class="w_code_right">长按识别二维码，获取你的2019毒物</h2>
				</div>
			</div>
	
			<h2 class="foot">
				<img th:src="@{/images/footbg.png}" />
			</h2>
		</div>
		<!--生成的图片的存放容器-->
	    <div class="shareImg" v-show="currIndex == 3">
	    	<img v-bind:src="shareImg"/>
	    </div>
	</div>
</body>
<script type="text/javascript" th:src="@{/js/jt.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
           
           
   
           
           
    var vm = new Vue({
    	el:"#app",
    	data:{
    		currIndex:1,
    		afterCanvasImageHide: true,
    		imgUrl:[[${session.snsUserInfo?.headImgUrl}]],
	        avatar: '',
	        index:null,
	        shareImg:'',
	        text:'',
	        getTime:'2019年'+[[${moun}]]+'月'
    	},
    		mounted: function() {
    			
    			this.$nextTick(function() {
    		        var _this = this;
    		        _this.texts(randomStr());
    		        // 用base64展示html中要显示的图片（如果这个图片地址是服务端链接，图片链接需要服务端允许跨域，本地图片可以不用转base64）
    		        // 因为直接使用服务端地址链接，canvas.toDataUrl API抛出异常：
    		        // Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. ==> 受污染的画布不能导出
    		        var imgUrl1 = _this.imgUrl;
    		        _this.img2base64(imgUrl1, 'Anonymous').then(function(res) {
    		          _this.avatar = res;
    		        });
    		      });
		    },
		    methods: {
		    	changeCurrIndex:function(index){
		    		this.index=layer.load();
	    			this.currIndex = index;
	    			this.generateImage();
	    			//this.takeScreenshot();
	    		},
		      /**
		       * 根据 window.devicePixelRatio 获取像素比
		       * @returns {number}
		       * @constructor
		       */
		      getDpr: function() {
		        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
		          return window.devicePixelRatio;
		        }
		        return 1;
		      },

		      /**
		       * 将传入值转为整数
		       * @param value
		       * @returns {number}
		       */
		      parseValue: function(value) {
		        return parseInt(value, 10);
		      },

		      // 将图片转为base64格式
		      img2base64: function(url, crossOrigin) {
		        return new Promise(resolve => {
		          const img = new Image();

		          img.onload = () => {
		            const c = document.createElement('canvas');

		            c.width = img.naturalWidth;
		            c.height = img.naturalHeight;

		            const cxt = c.getContext('2d');

		            cxt.drawImage(img, 0, 0);

		            // 得到图片的base64编码数据
		            resolve(c.toDataURL('image/png'));
		          };

		          // 结合合适的CORS响应头，实现在画布中使用跨域<img>元素的图像
		          crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
		          var timestamp = new Date().getTime();
		          img.src = url + '?' + timestamp;
		        });
		      },

		      /**
		       * 生成图片
		       */
		      generateImage: function() {
		        var _this = this;


		        // 获取想要转换的dom节点
		        // var dom = document.querySelector('body');
		        var dom = document.getElementById('app');
		        var box = window.getComputedStyle(dom);

		        // dom节点计算后宽高
		        var width = _this.parseValue(box.width);
		        var height = _this.parseValue(box.height);

		        // 获取像素比
		        var scaleBy = _this.getDpr();

		        // 创建自定义的canvas元素
		        var canvas = document.createElement('canvas');

		        // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
		        canvas.width = width * scaleBy;
		        canvas.height = height * scaleBy;

		        // 设置canvas css 宽高为DOM节点宽高
		        canvas.style.width = width + 'px';
		        canvas.style.height = height + 'px';

		        // 获取画笔
		        var context = canvas.getContext('2d');

		        // 将所有绘制内容放大像素比倍
		        context.scale(scaleBy, scaleBy);

		        // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
		        var w = document.getElementById('app').style.width;
		        var h = document.getElementById('app').style.height;

		        html2canvas(dom, {
		          allowTaint: true,
		          width: w,
		          height: h,
		          useCORS: true
		        }).then(function(canvas) {
		          // 将canvas转换成图片渲染到页面上
		          var url = canvas.toDataURL('image/png');// base64数据
		          _this.afterCanvasImageHide = false;
		          _this.shareImg = url;
	              layer.close(_this.index);
	              layer.msg('长按保存图片');
	              _this.currIndex = 3;
	              
	            //将canvas内容保存为文件并下载
	             /*  canvas.toBlob(function(blob) {
	                 saveAs(blob, "hangge.png");
	              }); */
		        });
		      },
		      //屏幕快照
		      takeScreenshot:function() {
		    	  var _this = this;
		          html2canvas(document.body).then(function(canvas) {
		              document.body.appendChild(canvas);
		              var  url = canvas.toDataURL();
		              _this.shareImg = url;
		              layer.close(_this.index);
		              layer.msg('长按保存图片');
		              _this.currIndex = 3;
		          });
		      },
		      texts:function(str) {
		    	  var _this = this;
		  		var arr = [];
		  		var text = document.getElementsByClassName("text")[0];
		  		for (var i = 0; i < str.length; i++) {
		  			arr[i] = str[i];
		  		}
		  		var index = 0;
		  		var obj = setInterval(function() {
		  			if (index < arr.length) {
		  				_this.text += arr[index];
		  			}
		  			index++;
		  		}, 100);
		  	}
		   }
    });
           
	
	/*]]>*/
</script>
</html>